<template>
    <div class="home">
		<!-- key做的作用是什么 就地复用-->
		<!-- key可以是下标吗 为什么 -->
		<!-- key可以是随机数吗  为什么 -->
		 <van-field v-model="keyword" label="文本" placeholder="请输入用户名" />
		 <van-button type="primary" @click="search">主要按钮</van-button>
		<van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <van-card
				v-for="item in shopList"
				:key="item.id"
				:num="item.stock"
				:price="item.price"
				:desc="item.content"
				:title="item.title"
				:thumb="item.image"
				@click="$router.push('/detail/'+item.id)"
			/>
        </van-list>
        
    </div>
</template>

<script>
import {mapState, mapMutations, mapActions} from 'vuex'
export default {
	data() {
		return {
			pageIndex:1,
			pageSize: 10,
			loading: false,
			finished: false,
			keyword: ''
		}
	},
	computed: {
		// 当依赖发生改变时改变
		...mapState('shop', ['shopList','total'])
	},
    created() {
		// vuex 当你需要的时候
		// 当你的业务场景没有vuex无法或者很难完成的时候
		// 不要为了用vuex而用vuex
		// 主要用来管理全局公用的数据 一个全局的状态管理器
    },
	methods: {
		...mapActions('shop', ['SET_SHOP_LIST']),
		...mapMutations('shop', ['clearShopList']),
		// 调vuex中的请求
		pageChange(index=1) {
			this.pageIndex = index;
			return this.SET_SHOP_LIST({
				pageIndex:this.pageIndex++,// ？ 为什么不用+=1 而用++  （+=1是立马加 所以请求的是第二页  后++则是执行完毕后在执行+1 ）
				pageSize:this.pageSize,
				keyword: this.keyword
			})
		},
		// 上拉加载
		async onLoad() {
			// 第一次进入页面会默认执行一次 
			// 之后每次滚动到底部会再执行一次
			// 当finished为true时候终止执行
			await this.pageChange(this.pageIndex);  // 因为这里时异步 所以使用await   （await后面必须是异步函数）
			this.loading = false;
			if (this.shopList.length >= this.total) { 
				this.finished = true; // 数据全部加载完成
			}
		},
		search() {
			// 给shoplist置空
			this.clearShopList()
			// 请求模糊查询的数据
			this.pageChange()
		}
	}
}
</script>

<style>
</style>